<template>
  <div class="code">
    <span v-for="(item, index) in 6" :key="index" :class="{'code-item': true, 'filled': password[index], 'error': error}">{{ password[index] ? '*' : ' ' }}</span>
  </div>
</template>

<script>
export default {
  name: 'PasswordInput',
  props: {
    error: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      password: ''
    }
  },
  watch: {
    error(val) {
      if (val) this.password = ''
    }
  },
  mounted() {
    document.addEventListener('keyup', this.onInput)
  },
  methods: {
    onInput(e) {
      if (['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].indexOf(e.key) >= 0) {
        this.password += e.key
        this.$emit('type')
      }
      if (this.password.length === 6) return this.$emit('password', this.password)
      if (this.password.length > 6) this.password = this.password.substring(0, 6)
      if (e.key === 'Backspace') this.password = this.password.substr(0, this.password.length - 1)
    }
  }
}
</script>

<style lang="scss" scoped>
  .code {
    display: flex;
  > .code-item {
    display: inline-block;
    line-height: 50px;
    text-align: center;
    font-size: 45px;
    font-weight: bold;
    height: 50px;
    width: 36px;
    border-bottom: 1px solid #C5CAD5;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    &.filled {
      border-bottom: 1px solid #000;
    }
    &.error {
      border-bottom: 1px solid #FF0000;
    }
  &:last-child {
     margin-right: 0;
   }
  }
  }
</style>
